<template>
  <el-dialog
    :close-on-click-modal="false"
    :before-close="cancel"
    :visible="visible"
    :title="$t('openCheck.openCheck11')"
    width="700px"
    class="addReasondetail"
  >
    <el-form
      :model="dynamicValidateForm"
      ref="dynamicValidateForm"
      label-width="100px"
      class="demo-dynamic"
    >
      <div
        v-for="(domain, index) in dynamicValidateForm.domains"
        :key="index"
        class="flex"
      >
        <!-- <div class="leftindex">{{ index + 1 }}</div> -->
        <div class="rightcon">
          <el-form-item
            :label="$t('openCheck.openCheck12')"
            class="zherror"
            :prop="'domains.' + index + '.title_zh'"
            :rules="{
              required: true,
              message: $t('openCheck.openCheck14'),
              trigger: 'blur',
            }"
          >
            <el-input
              type="textarea"
              autosize
              v-model="domain.title_zh"
              maxlength="35"
              show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('openCheck.openCheck13')"
            :prop="'domains.' + index + '.title_en'"
            class="zherror"
            :rules="{
              required: true,
              message: $t('openCheck.openCheck14'),
              trigger: 'blur',
            }"
          >
            <el-input
              type="textarea"
              
              v-model="domain.title_en"
              autosize
            ></el-input>
            <!-- <el-button
              v-if="index == 0"
              icon="el-icon-plus"
              type="primary"
              circle
              @click="addDomain"
            ></el-button>
            <el-button
              v-else
              type="danger"
              icon="el-icon-delete"
              circle
              @click.prevent="removeDomain(domain)"
            ></el-button> -->
          </el-form-item>
          <el-form-item
            :label="$t('openCheck.openCheck26')"
            :prop="'domains.' + index + '.title_tc'"
            :rules="{
              required: true,
              message: $t('openCheck.openCheck14'),
              trigger: 'blur',
            }"
          >
            <el-input
              type="textarea"
              autosize
              v-model="domain.title_tc"
              maxlength="35"
              show-word-limit
            ></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="info" plain @click="cancel">
        {{ $t("common.common1") }}
      </el-button>
      <el-button
        :loading="submitLoading"
        type="primary"
        plain
        @click="submit('dynamicValidateForm')"
      >
        {{ $t("common.common2") }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { reasonSub } from "@/api/openList/openCheck";
export default {
  data() {
    return {
      visible: false,
      submitLoading: false,
      dynamicValidateForm: {
        domains: [
          {
            title_zh: "",
            title_en: "",
            title_tc: ""
          },
        ],
      },
    };
  },
  methods: {
    init() {
      this.visible = true;
      this.dynamicValidateForm = {
        domains: [
          {
            title_zh: "",
            title_en: "",
            title_tc: ""
          },
        ],
      };
    },
    cancel() {
      this.visible = false;
      this.$refs.dynamicValidateForm.resetFields();
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm(this.$t("common.common8"), {
            type: "warning",
            closeOnClickModal: false,
            //阻止键盘点击回车事件
            document: (onkeydown = function (e) {
              var ev = typeof event != "undefined" ? window.event : e;
              if (ev.keyCode == 13) {
                return false;
              }
            }),
          })
            .then((_) => {
              reasonSub({
                title_zh: this.dynamicValidateForm.domains[0].title_zh,
                title_en: this.dynamicValidateForm.domains[0].title_en,
                title_tc: this.dynamicValidateForm.domains[0].title_tc,
              })
                .then((response) => {
                  if (response.code == 10000) {
                    this.$message.success(response.message);
                    this.$parent.getReasonList();
                    this.cancel();
                  } else {
                    this.$message.error(response.message);
                  }
                })
                .catch((error) => {
                  this.$message.error(error.Error);
                });
            })
            .catch((_) => {
              // this.$emit("modalcancel", "modalCardAddshow");
            });
        }
      });
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        title_zh: "",
        title_en: "",
        title_tc: ""
      });
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.addReasondetail {
  ::v-deep .flex {
    display: flex;
    margin: 15px 0;
    position: relative;
    .leftindex {
      position: absolute;
      left: 30px;
      top: 8px;
    }
    .rightcon {
      width: 90%;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .zherror {
      .el-form-item__error {
        display: none;
      }
    }
    .is-circle {
      position: absolute;
      right: -50px;
    }
    .el-textarea .el-input__count {
      height: 14px;
    }
  }
}
</style>